<template>
  <div>
    <div class="title">{{ jobName }}</div>
    <div class="top-title">系统信息</div>
    <div class="subtitle">{{ otherInfo.serviceSystem }}</div>
    <div class="top-title">内存</div>
    <div class="top">
      <template v-for="(item,index) in serverInfo1">
        <div :key="index">
          <el-progress type="dashboard" :stroke-width="10" :percentage="item.percentage" :color="colors" />
          <el-tooltip class="item" effect="dark" placement="bottom">
            <div slot="content" class="item_content">{{ item.diskName }}<br>总内存：{{ item.totalStorage }}<br>使用内存：{{ item.usedStorage }}</div>
            <div class="text">{{ item.diskName }}</div>
          </el-tooltip>
        </div>
      </template>
    </div>
    <div class="top-title">磁盘</div>
    <div class="top">
      <template v-for="(item,index) in serverInfo2">
        <div :key="index">
          <el-progress type="dashboard" :stroke-width="10" :percentage="item.percentage" :color="colors" />
          <el-tooltip class="item" effect="dark" placement="bottom">
            <div slot="content" class="item_content">{{ item.diskName }}<br>总内存：{{ item.totalStorage }}<br>使用内存：{{ item.usedStorage }}</div>
            <div class="text">{{ item.diskName }}</div>
          </el-tooltip>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getDatas } from '@/api/msg'
let percentage = null
export default {
  data() {
    return {
      colors: [
      ],
      serverInfo1: [],
      serverInfo2: [],
      otherInfo: {},
      jobName: ''
    }
  },
  computed: {
    ...mapGetters([
      'msgList'
    ])
  },
  watch: {
    msgList: {
      handler() {
        const _this = this
        let list = []
        if (_this.msgList.length !== 0) {
          list = _this.msgList.filter(res => (res.messageType * 1 !== 2 && res.taskId * 1 === _this.$route.query.id * 1))
          if (list.length !== 0) {
            console.log(JSON.parse(list[0].serviceInfo))
            const serviceInfo = JSON.parse(list[0].serviceInfo).map(item => {
              item.percentage = (parseFloat(item.usedStorage) / parseFloat(item.totalStorage)).toFixed(2) * 100
              return item
            })
            _this.otherInfo = list[0]
            _this.serverInfo1 = serviceInfo.filter(res => (res.diskName.indexOf('Physica') !== -1))
            _this.serverInfo2 = serviceInfo.filter(res => (res.diskName.indexOf('Physica') === -1))
            console.log(_this.otherInfo)
            console.log(_this.serverInfo1)
            console.log(_this.serverInfo2)
          }
        }
      },
      deep: false,
      immediate: false
    }
  },
  created() {
    const _this = this
    percentage = _this.$route.query.percentage
    _this.jobName = _this.$route.query.jobName
    _this.colors = [
      { color: '#67C23A', percentage: percentage * 0.7 },
      { color: '#E6A23C', percentage: percentage * 0.9 },
      { color: '#F56C6C', percentage: percentage }
    ]
    console.log(_this.$route.query.id)
    const params = {
      page: 1,
      pageSize: 1,
      messageType: 1,
      taskId: _this.$route.query.id
    }
    getDatas(params).then(res => {
      console.log(res.data.row)
      const list = res.data.row
      if (list.length !== 0) {
        console.log(JSON.parse(list[0].serviceInfo))
        const serviceInfo = JSON.parse(list[0].serviceInfo).map(item => {
          item.percentage = (parseFloat(item.usedStorage) / parseFloat(item.totalStorage)).toFixed(2) * 100
          return item
        })
        _this.otherInfo = list[0]
        _this.serverInfo1 = serviceInfo.filter(res => (res.diskName.indexOf('Physica') !== -1))
        _this.serverInfo2 = serviceInfo.filter(res => (res.diskName.indexOf('Physica') === -1))
      }
    })
  }

}
</script>
<style lang="scss" scoped>
.title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  padding: 20px 0 20px 0;
}
.subtitle {
  padding: 0 20px 10px 20px;
}
.top-title {
  padding: 20px;
  font-size: 18px;
  font-weight: bold;
}
.item_content {
  width: 200px;
}
.top {
  display: flex;
  flex-wrap: wrap;
  > div {
    width: 206px;
    padding: 20px 40px;
    .text {
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
